<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>成易博客-首页</title>

    <link th:replace="common/common :: common-head">
    <div th:replace="common/common :: #common-js"></div>


    <style>
        .el-carousel__item h3 {
            color: rgba(165, 192, 238, 0.97);
            font-size: 18px;
            opacity: 0.75;
            line-height: 300px;
            margin: 0;
        }

        .el-carousel__item:nth-child(2n) {
            background-color: rgba(153, 169, 191, 0.99);
        }

        .el-carousel__item:nth-child(2n+1) {
            background-color: #dae3ec;
        }
    </style>



</head>
<body style="background: rgba(243,240,240,0.27);padding-top: 70px; ">
<el-container>
    <div th:replace="common/common :: #common-top-nav"></div>

    <!--  轮播图  -->
    <div id="slide">
        <template>
        <el-carousel :interval="4000" arrow="always">
            <el-carousel-item v-for="item in 4" :key="item">
            </el-carousel-item>
        </el-carousel>
        </template>
    </div>
    <script>
        new Vue().$mount('#slide')
    </script>

<div id="homeInfo" v-cloak>

    <el-col :span="24"><div class="grid-content bg-purple-dark" style="background: red"></div></el-col>

    <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12 col-lg-offset-4 col-md-offset-4 col-sm-offset-3" style="margin-top: 2em;margin-bottom: 2em">
        <div class="input-group">
            <input type="text" name="blogTitle" id="blogTitle" @keyup.enter="showTitleBlog(query.title)" class="form-control" v-model="query.title" autocomplete="off" placeholder="博客标题">
            <span class="input-group-btn">
                <button class="btn btn-default" type="button"  @click="showTitleBlog(query.title)">搜索</button>
            </span>
        </div>
    </div>

    <hr/>

    <el-main style="height: 30em;">

        <div id="homeBlogList" v-cloak>
            <div v-for="item in items">
                <el-row type="flex" class="row-bg" justify="center">
                    <el-col :span="20" :xs="24" style="margin: 1em">
                        <el-card class="box-card" shadow="hover">

                            <!--  标题-标签 -->
                            <div slot="header" class="clearfix">
                                <input type="hidden" :value="item.id"/>
                                <el-tag type="info" class="blogTitle layui-col-lg4 layui-col-md4 layui-col-sm4 layui-col-xs4"><b>{{item.title}}</b></el-tag>
                                <el-tag type="success" style="margin-left: 8em" class="blogTitle layui-col-lg2 layui-col-md2 layui-col-sm2 layui-col-xs2">{{item.memo}}</el-tag>
                                <el-button style="float: right;" type="text" @click="showBlog(item.id)">查看</el-button>
                            </div>

                            <!--  内容开始 -->
                            <div class="value" v-html="item.value">

                            </div>
                            <!--  内容结束 -->

                            <div style="float: left">
                                <i class="fa fa-eye"></i>&nbsp;&nbsp;{{item.pageViews}}
                            </div>
                            <!--  作者 创建时间 -->
                            <div style="float: right">
                                {{item.name}}&nbsp;&nbsp;<i class="fa fa-code"></i>&nbsp;&nbsp;{{item.createDate}}
                            </div>

                        </el-card>
                    </el-col>
                </el-row>
            </div>
        </div>

    </el-main>

    <div th:replace="common/common :: #common-bottom"></div>

</div>

</el-container>


    <script th:src="@{/static/js/home/home.js}"></script>


<script>
    layui.use('carousel', function () {
        var carousel = layui.carousel;
        //建造实例
        carousel.render({
            elem: '#test1'
            , width: '100%' //设置容器宽度
            , arrow: 'always' //始终显示箭头
            //,anim: 'updown' //切换动画方式
        });
    });
</script>


</body>
</html>